<template>
  <section>
    <mt-header title="商品列表">
      <router-link to="/" slot="left">
        <mt-button icon="none"></mt-button>
      </router-link>
      <mt-button icon="none" slot="right"></mt-button>
    </mt-header>
    <div class="list clearfix">
      <div class="item" v-for="(item, index) in productList">
        <a class="item-top" href="javascript:void(0)">
          <img :src="item.pic_url" :alt="item.product_name" class="p-img">
        </a>
        <div class="item-middle">
          <div class="name">{{item.product_name}}</div>
        </div>
        <div class="item-bottom">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>

import { Header, Toast } from 'mint-ui';
export default {
  components: {
    Header,
    Toast
  },
  data() {
    return {
      productList: []
    }
  },
  async asyncData({ $axios }) {
  },
  async created() {
    this.get_product()
  },
  methods: {
    test() {
      Toast('我是Tip');
    },
    async get_product() {
      this.$get(this.$api.vip_user_product).then(res => {
        console.log(res);
        this.productList = res.data
      }).catch(err => {
        Toast('我是Tip');
      })
    }
  }
}
</script>

<style lang="scss">
.list {
  width: 100%;
  background: #f5f5f5;
  min-height: 100vh;
  padding: 0 12px;
  .item {
    width: 49%;
    float: left;
    margin-top: 10px;
    margin-right: 2%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    .item-top {
      width: 100%;
      float: left;
      height: 0;
      padding-bottom: 100%;
      position: relative;
      margin-bottom: 7px;
      .p-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
      }
    }
    .item-middle {
      float: left;
      width: 100%;
      padding: 0 12px;
      .name {
        white-space: nowrap;
        position: relative;
        box-sizing: border-box;
        font-size: 13px;
        color: rgb(51, 51, 51);
        text-overflow: ellipsis;
        margin-bottom: 10px;
        overflow: hidden;
      }
    }
  }
  .item:nth-of-type(2n) {
    margin-right: 0;
  }
}
</style>
